<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!-- <el-form-item label="产品名称" prop="productIdentification">
          <el-select v-model="queryParams.productIdentification" placeholder="请选择产品标识" @change="dictValue">
            <el-option v-for="dict in dict.type.product_verification_identification" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="产品条码" prop="productSn">
          <el-input style="width: 300px;" type="text" maxlength="100" v-model="queryParams.productSn"
            placeholder="请输入产品条码" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
  
        <el-form-item label="生产时间" prop="productionTime">
          <el-date-picker v-model="dateRange" style="width: 280px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="dataCheng"
            :clearable="false"></el-date-picker>
        </el-form-item>
  
        <el-form-item label="是否返工" prop="isRework">
          <el-select v-model="queryParams.isRework" placeholder="请选择是否返工" clearable>
            <el-option v-for="dict in dict.type.yes_or_no" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option v-for="dict in dict.type.product_status" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['mes:productionRecord:remove']">删除
        </el-button> -->
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="downloadExcel"
            v-hasPermi="['mes:productionRecord:export']">导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
  
            <el-table ref="table" size="mini" v-loading="loading" :data="workstationRecordList"
        @selection-change="handleSelectionChange" 
        :scroll-x="true"
        style="width: 100%">
        <el-table-column fixed="left" label="工单名称" align="center" prop="workOrderName" width="150" />
        <el-table-column fixed="left" label="产品条码" align="center" prop="productSn" width="150">
          <template v-slot="scope">
            <router-link :to="'/production/processing/record/' + scope.row.productSn" class="link-type">
              <span>{{ scope.row.productSn }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="工站名称" align="center" prop="workstationName" width="120" />
        <el-table-column label="设备名称" align="center" prop="deviceName" width="150" />
        <el-table-column label="零部件码" align="center" prop="componentBarcode" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.componentBarcode && scope.row.componentBarcode !== '-'">
              {{ scope.row.componentBarcode }}
            </span>
            <span v-else style="color: #999;">-</span>
          </template>
        </el-table-column>
        <el-table-column label="加工时间" align="center" prop="processingTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.processingTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="节拍值" align="center" prop="beatValue" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.beatValue !== null && scope.row.beatValue !== undefined">
              {{ scope.row.beatValue }}
            </span>
            <span v-else style="color: #999;">-</span>
          </template>
        </el-table-column>
        <el-table-column label="加工结果" align="center" prop="processingResult" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.processingResult === 1 ? 'success' : 'danger'" size="small">
              {{ scope.row.processingResult === 1 ? 'OK' : 'NG' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工艺参数" align="center" prop="processParameters" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showProcessParameters(scope.row)" 
                       v-if="scope.row.processParameters">
              查看参数
            </el-button>
            <span v-else style="color: #999;">-</span>
          </template>
        </el-table-column>
        <el-table-column label="生产工艺" align="center" prop="productionProcessName" width="150">
          <template slot-scope="scope">
            <div @click="getRoutlist(scope.row)" style="color: #337ab7;cursor: pointer;">
              {{ scope.row.productionProcessName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否返工" align="center" prop="isRework" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_or_no" :value="scope.row.isRework" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.product_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
            <span v-else style="color: #999;">-</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="viewDetails(scope.row)">详情</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleRework(scope.row)">返工</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleScrap(scope.row)">报废</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
  
      <!-- 添加或修改生产记录对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="45%" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
  
          <el-form-item v-if="flag == 1 && dialogVisible" label="权限密码" prop="processId" style="width: 62%;">
            <el-input v-model="userpassWord" placeholder="请输入权限密码" @input="valuechen" type="password" />
          </el-form-item>
  
          <el-form-item v-if="flag == 1" label="返工工艺" prop="processId">
            <el-select v-model="form.reworkProcessId" placeholder="请选择" :disabled="dialogVisible">
              <el-option v-for="item in processOptions" :key="item.value" :label="item.label" :value="(item.value)"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="flag == 2" label="报废原因" prop="scrapReason">
            <el-input v-model="form.scrapReason" type="textarea" placeholder="请输入内容" />
          </el-form-item>
  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" v-if="!dialogVisible">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="routeName" :visible.sync="Visiblelook" width="100%">
        <div style="margin: 10 30px;">
          <el-steps :active="steps.length" align-center>
            <el-step v-for="(item, index) in steps" :key="index" :title="item.workstation"
              :description="item.deviceName.substring(0, 6)"></el-step>
          </el-steps>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Visiblelook = false">取 消</el-button>
          <el-button type="primary" @click="Visiblelook = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
  
    listProductionRecordVo,
    getProductionRecord,
    delProductionRecord,
  
    updateProductionRecord
  } from "@/api/mes/production_record";
  import { listDeviceParams } from "@/api/mes/device";
  import {
    listProcessRoute,
  } from "@/api/mes/process_route";

  import { listProcess } from '@/api/mes/process';
  import SerpentineSteps from "../../../components/SerpentineSteps/index.vue";
  import { buildRows, buildColumns } from '@/utils/tableDataList.js';
  import { downloadTableData } from "@/utils/excel";
  import { getUserProfile } from "@/api/system/user";
  import * as XLSX from 'xlsx';
  export default {
  
    name: "ProductionRecord",
    dicts: ['product_status', 'yes_or_no', 'processing_result', 'product_verification_identification', 'sys_password'],
    components: {
      SerpentineSteps,
    },
    data() {
      return {
        dialogVisible: false,
        // 遮罩层
        userpassWord: '',
        Visiblelook: false,
        loading: false,
        // 选中数组
        dateRange: [],
        ids: [],
        // 非单个禁用
        single: true,
        routeName: '',
        currentStep: 5, // 当前步骤索引，从 0 开始
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        processOptions: [],
        allProcessOptions: [], // 添加备份所有工艺选项
        // 生产记录表格数据
        productionRecordList: [],
        // 工站记录表格数据
        workstationRecordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        flag: null,
        steps: [],
        user: {},
        confirmPasswrod: '',
        // 查询参数
        columnHeaders: {
          productSn: '产品条码',
          processingResult: '加工结果',
          scrapReason: '报废原因',
          productionProcessName: '生产工艺',
          reworkCount: '返工次数',
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          startTime: null,
          // productIdentification: '700W',
          endTime: null,
          productSn: null,
          productionTime: null,
          productionProcessId: null,
          reworkProcessId: null,
          processCode: null,
          isRework: null,
          status: null,
          isSample: null,
          reworkCount: null,
          scrapReason: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        columns: []
      };
    },
    created() {
      const now = new Date();
      const yyyyMMdd = now.toISOString().split('T')[0];
      this.dateRange[0] = yyyyMMdd
      this.dateRange[1] = yyyyMMdd
      this.queryParams.startTime = `${yyyyMMdd} 00:00:00`;
      this.queryParams.endTime = `${yyyyMMdd} 23:59:59`;
      this.getUser();
    },
    mounted() {
      this.getDeviceParams()
      // this.getList();
      this.getProcessList()
      this.getConfigKey("sys.rework.password").then(response => {
        this.confirmPasswrod = response.msg
      });
    },
    methods: {
      getDeviceParams() {
        listDeviceParams().then(response => {
          this.reBuildColumns(response.rows)
        })
      },
      reBuildColumns(rows) {
        let columns = buildColumns(rows)
        this.columns = columns
        this.getList();
      },
  
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
        });
      },
      /** 查询生产记录列表 */
      getList() {
        this.loading = true;
        listProductionRecordVo(this.queryParams).then(response => {
          let { rows } = response
          this.reBuildData(rows)
          this.productionRecordList = rows;
          this.total = response.total;
          this.loading = false;
          // rows.forEach(item => {
          //   let productSnPrefix = item.productSn.slice(0, 3);
          //   let productIdentificationPrefix = this.queryParams.productIdentification.slice(0, 3);
          //   if (productSnPrefix == productIdentificationPrefix) {
          //     if (this.queryParams.productIdentification == '700W') {
          //       this.productionRecordList = rows;
          //       this.total = response.total;
          //     }
          //   } else {
          //     console.log(`ID: ${item.id}, productSn: ${item.productSn} 与 productIdentification 前三位不同`);
          //   }
  
          // });
        });
  
      },
      reBuildData(list) {
        let rows = buildRows(list)
        
        // 构建工站记录数据 - 将每个工站的加工记录展开为单独的行
        let workstationRecords = [];
        
        list.forEach(productionRecord => {
          if (productionRecord.processingRecordList && productionRecord.processingRecordList.length > 0) {
            // 遍历每个加工记录（每个工站）
            productionRecord.processingRecordList.forEach(processingRecord => {
              const workstationRecord = {
                // 基本信息
                id: processingRecord.id,
                productSn: productionRecord.productSn,
                workOrderName: productionRecord.taskName || '-',
                
                // 工站信息
                workstationName: processingRecord.workstation || '-',
                deviceName: processingRecord.deviceName || '-',
                
                // 零部件信息 - 从后端获取副码地址读取的值
                componentBarcode: processingRecord.subBarcode || '-',
                
                // 加工信息
                processingTime: processingRecord.processingTime,
                duration: processingRecord.duration,
                beatValue: processingRecord.beatValue, // 从节拍地址读取的值
                processingResult: processingRecord.processingResult,
                processParameters: processingRecord.processParameters,
                
                // 生产信息
                productionProcessName: productionRecord.productionProcessName,
                isRework: productionRecord.isRework,
                status: productionRecord.status,
                remark: processingRecord.remark || productionRecord.remark,
                
                // 保留原始数据引用，用于操作
                originalProductionRecord: productionRecord,
                originalProcessingRecord: processingRecord
              };
              
              workstationRecords.push(workstationRecord);
            });
          } else {
            // 如果没有加工记录，创建一个基本记录
            const workstationRecord = {
              id: productionRecord.id,
              productSn: productionRecord.productSn,
              workOrderName: productionRecord.taskName || '-',
              workstationName: '-',
              deviceName: '-',
                             componentBarcode: productionRecord.subBarcode || '-',
                             processingTime: productionRecord.productionTime,
               duration: null,
               beatValue: null,
               processingResult: null,
               processParameters: null,
              productionProcessName: productionRecord.productionProcessName,
              isRework: productionRecord.isRework,
              status: productionRecord.status,
              remark: productionRecord.remark,
              originalProductionRecord: productionRecord,
              originalProcessingRecord: null
            };
            
            workstationRecords.push(workstationRecord);
          }
        });
        
        // 按加工时间倒序排列
        workstationRecords.sort((a, b) => {
          const timeA = new Date(a.processingTime || 0);
          const timeB = new Date(b.processingTime || 0);
          return timeB - timeA;
        });
        
        this.productionRecordList = rows;
        this.workstationRecordList = workstationRecords;
      },
      dictValue() {
        this.queryParams.productIdentification += 'W'
      },
      // 取消按钮
      cancel() {
        this.open = false;
        // 恢复完整的工艺选项
        this.processOptions = JSON.parse(JSON.stringify(this.allProcessOptions));
        this.reset();
      },
      parseJson(str) {
        return str ? JSON.parse(str) : [];
      },
      valuechen() {
        if (this.userpassWord == this.confirmPasswrod) {
          this.dialogVisible = false
        }
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          productSn: null,
          productionTime: null,
          productionProcessId: null,
          reworkProcessId: null,
          processCode: null,
          isRework: null,
          status: null,
          reworkCount: null,
          scrapReason: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        const now = new Date();
        const yyyyMMdd = now.toISOString().split('T')[0];
        // 重置 dateRange 和 queryParams 的时间范围
        this.dateRange = [yyyyMMdd, yyyyMMdd];
        this.queryParams.startTime = `${yyyyMMdd} 00:00:00`;
        this.queryParams.endTime = `${yyyyMMdd} 23:59:59`;
        this.handleQuery();
      },
      dataCheng() {
  
        this.queryParams.startTime = this.dateRange[0] + ' 00:00:00'
        this.queryParams.endTime = this.dateRange[1] + ' 23:59:59'
  
      },
      //工艺
      getProcessList() {
        let queryParams = {
          pageNum: 1,
          pageSize: 100,
          processType: 2
        }
        listProcess(queryParams).then(response => {
        
          this.processOptions = this.buildOptions(response.rows, { value: 'id', label: 'processName' });
          this.allProcessOptions = JSON.parse(JSON.stringify(this.processOptions)); // 使用深拷贝备份所有工艺选项
        });
      },
      buildOptions(rows, op) {
        return rows.map(item => {
          return {
            value: item[op.value],
            label: item[op.label]
          }
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加生产记录";
      },
      /** 修改按钮操作 */
      handleRework(row) {
        // 获取原始生产记录
        const productionRecord = row.originalProductionRecord || row;
        
        let firstChar = productionRecord.productSn.charAt(0);
        // 根据产品条码首字符过滤工艺选项
        let filteredOptions = this.allProcessOptions.filter(item => item.label.charAt(0) === firstChar);
        
        // 如果没有匹配的工艺，使用所有工艺选项
        if (filteredOptions.length === 0) {
          console.warn(`没有找到首字符为 "${firstChar}" 的工艺，将显示所有工艺选项`);
          this.processOptions = JSON.parse(JSON.stringify(this.allProcessOptions));
        } else {
          this.processOptions = filteredOptions;
        }
        
        if (this.user.userId !== 1) {
          this.dialogVisible = true
        }
        this.userpassWord = ''
        this.flag = 1
        this.reset();
        
        // 使用原始生产记录的ID
        const id = productionRecord.id || this.ids
        getProductionRecord(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改返工路径";
        });
      },
      //报废
      handleScrap(row) {
        // 获取原始生产记录
        const productionRecord = row.originalProductionRecord || row;
        
        this.flag = 2
        this.reset();
        
        // 使用原始生产记录的ID
        const id = productionRecord.id || this.ids
        getProductionRecord(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "报废原因";
        });
      },
      /** 提交按钮 */
      submitForm() {
  
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.isRework = 1
            this.form.reworkCount = this.form.reworkCount + 1
            this.form.status = 3
  
            if (this.form.id != null) {
              updateProductionRecord(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                // 恢复完整的工艺选项
                this.processOptions = JSON.parse(JSON.stringify(this.allProcessOptions));
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除生产记录编号为"' + ids + '"的数据项？').then(function () {
          return delProductionRecord(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      processStyle(text) {
        if (text == null || text === '') {
          return ''
        }
        if (typeof text == 'number') {
          return text
        }
        const tempElement = document.createElement('span');
        tempElement.innerHTML = text.trim();
        if (tempElement.childNodes.length === 1 && tempElement.firstChild.nodeType === 1) {
          return tempElement.firstChild.textContent.trim();
        }
        return text;
      },
      /** 导出按钮操作 */
      downloadExcel() {
        if (true) {
          downloadTableData(this.$refs.table, this.productionRecordList, this.dict.type)
          return
        }
        const data = (this.productionRecordList || []).map(row => {
          console.log(row)
          return Object.keys(row).reduce((obj, key) => {
            if (!obj) {
              return
            }
            let label = this.columnHeaders ? this.columnHeaders[key] : undefined;
            if (label) {
              if (key === 'processingResult') {
                obj[label] = row[key] == 1 ? '合格' : '不合格';
              } else {
                obj[label] = row[key];
              }
            } else {
              if (key.startsWith("OP")) {
                let value = this.processStyle(row[key]);
                obj[key] = value
                if (key.includes('工序结果')) {
                  if (value == 1) {
                    obj[key] = 'OK'
                  } else if (value == 2) {
                    obj[key] = 'NG'
                  }
                }
              }
            }
            return obj;
          }, {});
        });
  
        if (data.length > 0) {
          const ws = XLSX.utils.json_to_sheet(data);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
          XLSX.writeFile(wb, '加工过程.xlsx');
        } else {
          console.error('No data available to export!');
        }
      },
      containsChinese(str) {
        const regex = /[\u4e00-\u9fa5]+/;
        return regex.test(str);
      },
            getRoutlist(row) {
        let processId = row.originalProductionRecord ? row.originalProductionRecord.productionProcessId : row.productionProcessId;
        let queryParams = {
          pageNum: 1,
          pageSize: 100,
          processId: processId
        }
        listProcessRoute(queryParams).then(response => {
          this.steps = response.rows;
          this.routeName = row.productionProcessName + "路径"
          this.Visiblelook = true
        });
      },
      
      // 显示工艺参数
      showProcessParameters(row) {
        if (!row.processParameters) {
          this.$message.warning('该工站暂无工艺参数数据');
          return;
        }
        
        this.$alert(this.formatProcessParameters(row.processParameters), '工艺参数详情', {
          dangerouslyUseHTMLString: true,
          customClass: 'process-parameters-dialog'
        });
      },
      
      // 格式化工艺参数显示
      formatProcessParameters(params) {
        if (!params) return '暂无数据';
        
        try {
          const parsedParams = typeof params === 'string' ? JSON.parse(params) : params;
          
          let html = '<div class="parameter-info">';
          
          if (Array.isArray(parsedParams)) {
            parsedParams.forEach(param => {
              html += `
                <div class="param-item">
                  <strong>${param.name || param.paramName || '参数'}：</strong>
                  <span class="param-value ${this.getParamStatusClass(param.status)}">${param.value || param.actualValue || '-'}</span>
                  ${param.unit ? `<span class="param-unit">${param.unit}</span>` : ''}
                  ${param.lower || param.upper ? `<span class="param-range">(${param.lower || '-'} ~ ${param.upper || '-'})</span>` : ''}
                  ${param.status && param.status !== 'normal' ? `<span class="param-status ${param.status}">${this.getStatusText(param.status)}</span>` : ''}
                </div>
              `;
            });
          } else if (typeof parsedParams === 'object') {
            Object.keys(parsedParams).forEach(key => {
              const param = parsedParams[key];
              html += `
                <div class="param-item">
                  <strong>${key}：</strong>
                  <span class="param-value">${typeof param === 'object' ? (param.value || param.actualValue || JSON.stringify(param)) : param}</span>
                </div>
              `;
            });
          }
          
          html += '</div>';
          return html;
        } catch (e) {
          return `<pre>${params}</pre>`;
        }
      },
      
      // 获取参数状态样式类
      getParamStatusClass(status) {
        switch (status) {
          case 'upper': return 'status-upper';
          case 'lower': return 'status-lower';
          case 'normal': return 'status-normal';
          default: return '';
        }
      },
      
      // 获取状态文本
      getStatusText(status) {
        switch (status) {
          case 'upper': return '超上限';
          case 'lower': return '超下限';
          case 'normal': return '正常';
          default: return status;
        }
      },
      
      // 查看详情
      viewDetails(row) {
        const productSn = row.productSn;
        this.$router.push(`/production/processing/record/${productSn}`);
      },
      
      
    }
  };
  </script>
  
  
  <style>
  /* 定义滚动条轨道的样式 */
  ::-webkit-scrollbar {
    width: 8px;
    /* 滚动条轨道的宽度 */
    height: 16px;
    /* 横向滚动条的高度，增加到16px */
  }
  
  /* 定义滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 8px;
  }
  
  /* 定义滚动条轨道的样式 */
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 8px;
  }
  
  /* 鼠标悬停时滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #909399;
  }
  
  /* 确保滚动条在最上层 */
  .el-table ::-webkit-scrollbar {
    z-index: 9999 !important;
    position: relative;
  }
  
  /* 调整固定列的层级，避免遮挡滚动条 */
  .el-table .el-table__fixed {
    z-index: 10 !important;
  }
  
  .el-table .el-table__fixed-right {
    z-index: 10 !important;
  }
  
  /* 确保表格容器不会遮挡滚动条 */
  .el-table .el-table__body-wrapper {
    overflow-x: auto !important;
  }
  
  /* 强制修复Element UI表格滚动条问题 */
  .el-table__body-wrapper::-webkit-scrollbar {
    height: 16px !important;
    background: transparent !important;
  }
  
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #c0c4cc !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }
  
  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #f5f5f5 !important;
    border-radius: 8px !important;
  }
  
  .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #909399 !important;
  }
  
  /* 确保滚动条区域可以被点击 */
  .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
    background-color: #606266 !important;
  }
  
  /* 修复固定列可能造成的滚动条遮挡 */
  .el-table .el-table__fixed,
  .el-table .el-table__fixed-right {
    pointer-events: none;
  }
  
  .el-table .el-table__fixed .el-table__fixed-body-wrapper,
  .el-table .el-table__fixed-right .el-table__fixed-body-wrapper {
    pointer-events: auto;
  }
  
  .upper {
    color: red;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }
  
  .lower {
    color: blue;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }
  
  .permission {
  display: flex;
  text-align: center;
}

/* 工艺参数对话框样式 */
.process-parameters-dialog .el-message-box__content {
  max-height: 400px;
  overflow-y: auto;
}

.parameter-info {
  text-align: left;
}

.param-item {
  margin-bottom: 12px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #409EFF;
}

.param-item strong {
  color: #303133;
  margin-right: 8px;
}

.param-value {
  font-weight: 600;
  margin-right: 8px;
}

.param-value.status-normal {
  color: #67C23A;
}

.param-value.status-upper {
  color: #F56C6C;
}

.param-value.status-lower {
  color: #E6A23C;
}

.param-unit {
  color: #909399;
  font-size: 12px;
  margin-right: 8px;
}

.param-range {
  color: #606266;
  font-size: 12px;
  margin-right: 8px;
}

.param-status {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: white;
}

.param-status.upper {
  background-color: #F56C6C;
}

.param-status.lower {
  background-color: #E6A23C;
}
  </style>
  